<template>
	<view class="container">
		<view class="title_box">
			<view class="title_text">叶畈水库</view>
			<uni-row class="demo-uni-row">
				<uni-col :span="12"> 
					<view>总监控数： <text style="color: #e43d33">17</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>大坝上游监控数： <text style="color: #FFF">9</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>大坝下游监控数： <text style="color: #FFF">8</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>离线数量： <text style="color: #FFF">4</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>在线数量： <text style="color: #FFF">13</text></view>
				</uni-col>
				<uni-col :span="12"> 
					<view>在线率： <text style="color: #FFF">76%</text></view>
				</uni-col>
				<uni-col :span="24">
					<progress :percent="60" activeColor="#30C8FF" backgroundColor="#9CACF1"  stroke-width="7" />
				</uni-col>
			</uni-row>
		</view>
		<uni-section :title="i.groupName" type="line" v-for="(i, num) in videoGroup" :key="num">
			<uni-row  :gutter="22">
				<uni-col :span="12" v-for="(item, index) in i.videoList" :key="index">
					<view class="video_item" @click="showVideoPopup">
						<image class="video_image" :src="item.img" mode="scaleToFill" />
						<view class="video_info">
							<view class="video_name">
								<text class="circle"></text>
								<text class="video_name_text" :title="item.name">{{ item.name }}</text>
							</view>
							<text class="video_status">{{ item.time }}</text>
						</view>
					</view>
				</uni-col>
			</uni-row>
		</uni-section>

		<!-- 视频播放弹窗 -->
		<view class="video-dia-mask" v-if="videoPopup">
			<uv-icon class="close-icon" name="close-circle-fill" color="#fff" size="22" @click="videoPopup = false"></uv-icon>
			<view id="parentElement" class="popup-content"></view>
		</view> 
	</view>
</template>
 
<script> 
	import Hls from '../../../static/player/dhhls.min.js';
	export default {
		data() {
			return {
				videoPopup: false,
				videoGroup: [
					{
						groupName: "管理处",
						videoList: [
							{ name: '机房', img: require("static/vidwoMonitor/1.png"), time: '15:20:30' }, 
							{ name: '仓库', img: require("static/vidwoMonitor/2.png"), time: '15:20:30' }, 
							{ name: '中控室', img: require("static/vidwoMonitor/3.png"), time: '15:20:30' }, 
							{ name: '院子', img: require("static/vidwoMonitor/4.png"), time: '15:20:30' }, 
						],
					},
					{
						groupName: "副坝",
						videoList: [
							{ name: '副坝坝上', img: require("static/vidwoMonitor/5.png"), time: '15:20:30' }, 
							{ name: '副坝路边', img: require("static/vidwoMonitor/6.png"), time: '15:20:30' }, 
							{ name: '副坝量水堰测点', img: require("static/vidwoMonitor/7.png"), time: '15:20:30' },   
						],
					},
					{
						groupName: "主坝",
						videoList: [
							{ name: '水质监测站', img: require("static/vidwoMonitor/8.png"), time: '15:20:30' }, 
							{ name: '主坝坝上右侧', img: require("static/vidwoMonitor/1.png"), time: '15:20:30' },  
							{ name: '主坝坝上左侧', img: require("static/vidwoMonitor/7.png"), time: '15:20:30' },  
							{ name: '溢洪道上游', img: require("static/vidwoMonitor/3.png"), time: '15:20:30' },  
							{ name: '溢洪道下游', img: require("static/vidwoMonitor/4.png"), time: '15:20:30' },  
							{ name: '主坝量水堰测点', img: require("static/vidwoMonitor/5.png"), time: '15:20:30' },  
							{ name: '闸房', img: require("static/vidwoMonitor/6.png"), time: '15:20:30' },  
							{ name: '主坝左侧坝下', img: require("static/vidwoMonitor/4.png"), time: '15:20:30' },  
						],
					},
					{
						groupName: "下游影响区",
						videoList: [
							{ name: '主坝下游1号', img: require("static/vidwoMonitor/2.png"), time: '15:20:30' }, 
							{ name: '主坝下游2号', img: require("static/vidwoMonitor/6.png"), time: '15:20:30' },  
							{ name: '副坝下游1号', img: require("static/vidwoMonitor/3.png"), time: '15:20:30' },   
						],
					},
					{
						groupName: "库区",
						videoList: [
							{ name: '库区上游1', img: require("static/vidwoMonitor/1.png"), time: '15:20:30' }, 
							{ name: '库区上游2', img: require("static/vidwoMonitor/2.png"), time: '15:20:30' }, 
							{ name: '库区中部', img: require("static/vidwoMonitor/3.png"), time: '15:20:30' },  
							{ name: '库区与周冲水库连接处', img: require("static/vidwoMonitor/4.png"), time: '15:20:30' },   
						],
					},
					{
						groupName: "高点",
						videoList: [
							{ name: '主副坝连接处高点', img: require("static/vidwoMonitor/5.png"), time: '15:20:30' },  
						],
					},
				], 
				hlsPlayer: null,
            	videoUrl: "http://218.28.13.94:7086/live/cameraid/1000029%240/substream/1.m3u8"
			}
		},
		mounted() { 
			
		},
		methods: {
			showVideoPopup(){ 
				let _this = this; 
				_this.videoPopup = true;
				_this.$nextTick(() => {
					var parent = document.getElementById('parentElement');   
					let video = document.createElement('video');
					video.id = 'myVideo';
					video.ref = 'myVideo';
					video.style = 'width: 100%; height: 100%;';
					video.controls = true;
					video.preload = "auto";
					video.autoplay = true;  
					parent.appendChild(video);
					_this.playHls(_this.videoUrl); 
				});
			}, 
 
			playHls(url) { 
				let _this = this;  
				if (_this.hlsPlayer !== null) {
					_this.hlsPlayer.destroy();
				} 
				_this.hlsPlayer = new Hls();
 
				 
				let video = document.getElementById('myVideo'); 
				
				_this.hlsPlayer.loadSource(url);
				_this.hlsPlayer.attachMedia(video);
				_this.hlsPlayer.on(Hls.Events.MANIFEST_PARSED, () => {
					video.play();
				});
			},
		}
	}
</script>

<style lang="scss">
.container{
	padding: 0.8rem; 
}
.title_box{ 
	background-color: #4768F4;
	box-shadow: 0 0 10px 0 #4768F4;
	border-radius: 0.4rem;
	padding: 0.8rem;
	.title_text{
		color: #fff;
		font-size: 2rem;
		font-weight: bold;
		margin: 1.2rem 0;
	}

	.uni-col {
		margin: 0.2rem 0;
		view{
			color: #d7ddf8;
		}
	}
	.uni-col-24 {
		margin: 0.6rem 0;
	} 
}

.uni-section{
	background: unset !important; 
}
/deep/ .uni-section-header{
	padding-left: 0 !important;
} 

.video_item { 
	width: 100%;
	height: 6rem;
	border-radius: 0.4rem;
	position: relative;
	overflow: hidden;
	margin-bottom: 0.8rem;
}

.video_image {
	width: 100%; 
	height: 100%; 
	position: absolute;
	top: 0;
	left: 0; 
}

.video_info {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	width: 100%; 
	background: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */
	padding: 0.2rem 0.4rem ; 
	color: #fff;
	font-size: 0.8rem;
	box-sizing: border-box;
}
.video_name{
	display: flex;
	align-items: center;
} 

 
.circle{
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background-color: #17A465;
	margin-right: 0.3rem;;
}

.video_name_text{
	max-width: 7rem; 
	white-space: nowrap; /* 防止文字换行 */
	overflow: hidden; /* 隐藏溢出的文字 */
	text-overflow: ellipsis;
}
 
.video-box{
	width: 100vw !important;
	height: 16rem !important; 
	/deep/.dhHlsVdieoCloseBtnmyVideo{
		display: none !important;
	}
}
.video-dia-mask{
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5); 
	backdrop-filter: blur(10px);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	display: flex; 
	justify-content: center; 
	flex-direction: column; 
	align-items: end;
	.close-icon{    
		margin: 0.8rem;
	}
}
.popup-content{
	width: 100%;
	height: 14rem;
}
</style>
